<template>
  <view :class="['comp__tab', { 'fixed': fixed }]" id="tab-box" v-if="tabList.length > 0">
    <view class="comp__tab-inner">
      <scroll-view
        :scroll-x="true"
        scroll-with-animation
        :show-scrollbar="false"
        :scroll-left="slider.scrollLeft"
        :enable-flex="true"
        class="comp__tab-container"
      >
        <view :class="['comp__tab-wrap', align]">
          <block v-for="(item, index) in tabList" :key="index">
            <view
              class="comp__tab-item"
              :class="{ active: activeIndex === index }"
              :id="'tab_'+index"
              @click="tabClick(index)"
            >
             {{ item.text || item }}
            </view>
          </block>
        </view>
        <view
          class="comp__tab-underline"
          :style="'transform:translateX(' + slider.left + 'px);width:' + slider.width + 'px'"
        />
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  name: "m-tabs",

  props: {
    // 是否悬浮页面顶部
    fixed: Boolean,

    // 对齐方式，left，center，right
    align: { 
      type: String,
      default: "left"
    },

    tabData: {
      type: Array,
      default: () => []
    },

    activeIndex: {
      type: Number,
      default: 0
    },

    underLinePadding: {
      type: Number,
      default: 10
    },
  },

  data() {
    return {
      tabList: [],
      tabListSlider: [],
      box: {
        left: 0,
        right: 0,
        top: 0,
        width: 0,
        height: 0,
        bottom: 0
      },
      slider: {
        left: 0,
        width: 0,
        scrollLeft: 0
      },
    };
  },

  watch: {
    tabData(value) {
      this.tabList = value;
      setTimeout(() => {
        this.updateTabWidth();
      }, 0);
    },

    activeIndex(newValue, oldValue) {
      this.tabToIndex(newValue);
    }
  },

  mounted() {
    this.tabList = this.tabData;

    setTimeout(() => {
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".comp__tab")
        .boundingClientRect(res => {
          this.box = res;
          this.updateTabWidth();
        })
        .exec();
    }, 0);
  },

  methods: {
    tabClick(index) {
      this.$emit("update:activeIndex", index);
      this.tabToIndex(index);
      this.$emit("tab-click", index);
    },

    tabToIndex(index) {
      let _slider = this.tabListSlider[index];

      if (_slider) {
        this.slider = {
          left: _slider.left + this.underLinePadding,
          width: _slider.width - this.underLinePadding * 2,
          scrollLeft: _slider.scrollLeft
        };
      }
    },

    updateTabWidth(index = 0) {
      let data = this.tabList;

      if (data.length == 0) return false;

      const query = uni.createSelectorQuery().in(this);

      query
        .select("#tab_" + index)
        .boundingClientRect(res => {
          let _prev_slider = this.tabListSlider[index - 1];
          const leftValue = this.box ? this.box.left : 0;
          if (res) {
            this.tabListSlider[index] = {
              left: res.left - leftValue,
              width: res.width,
              scrollLeft:
                res.left - leftValue - (_prev_slider ? _prev_slider.width : 0)
            };
          }

          if (this.activeIndex === index) {
            this.tabToIndex(this.activeIndex);
          }

          index++;
          if (data.length > index) {
            this.updateTabWidth(index);
          }
        })
        .exec();
    }
  }
};
</script>

<style lang="scss" scoped>
.comp__tab {
  width: 100%;
  color: #333;
  display: flex;
  height: 90rpx;
  font-size: 28rpx;
  z-index: 10;
  overflow: hidden;

  &.fixed {
    position: fixed;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
    top: 0;
  }

  .active {
    color: #e54d42;
  }

  &-inner {
    width: 100%;
  }

  &-container {
    white-space: nowrap;
    display: flex;

    ::-webkit-scrollbar {
      display: none;
    }
  }

  &-wrap {
    &.left {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
    }

    &.center {
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
    }

    &.right {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-end;
    }
  }

  &-item {
    display: inline-block;
    text-align: center;
    padding: 0 30rpx;
    height: 86rpx;
    line-height: 90rpx;
  }

  &-underline {
    height: 4rpx;
    background-color: #e54d42;
    border-radius: 3px;
    transition: 0.5s;
    position: absolute;
    top: 41px;
  }
}

/* #ifdef H5 */
.comp__tab {
  top: 88rpx;
}
/* #endif */
</style>
